<template>
	<li :class="classes" @click="handleClick">
		<slot></slot>
	</li>
</template>
<script lang="ts">
	import Anes from "../base";
	import { Prop, Component } from "vue-property-decorator";
	const prefixCls = "ivu-dropdown-item";
	import { findComponentUpward } from "../../utils/assist";
	import Dropdown from "./dropdown.vue";
	@Component({ name: "DropdownItem" })
	export default class DropdownItem extends Anes {
		@Prop() public name!: string | number;
		@Prop({ type: Boolean, default: false }) public disabled!: boolean;
		@Prop({ type: Boolean, default: false }) public selected!: boolean;
		@Prop({ type: Boolean, default: false }) public divided!: boolean;

		get classes() {
			return [
				`${prefixCls}`,
				{
					[`${prefixCls}-disabled`]: this.disabled,
					[`${prefixCls}-selected`]: this.selected,
					[`${prefixCls}-divided`]: this.divided
				}
			];
		}

		handleClick() {
			if (this.disabled) return;
			const $parent = findComponentUpward<Dropdown>(this, "Dropdown");
			const hasChildren =
				this.$parent && this.$parent.$options.name === "Dropdown";

			if (hasChildren) {
				this.$parent.$emit("on-haschild-click");
			} else {
				if ($parent && $parent.$options.name === "Dropdown") {
					$parent.$emit("on-hover-click");
				}
			}
			$parent?.$emit("on-click", this.name);
		}
	}
</script>
